import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {withRouter} from "react-router-dom";
import {ActivityIndicator} from "weaver-mobile";
import {Form} from "weaver-mobile-page";
import FloatingTouch from "../../public/FloatingBtn";

@inject("projectFormStore")
@withRouter
@observer
export default class ProjectForm extends Component {
    componentDidMount() {
        this.Init(this.props);
    }

    Init = (props) => {
        const {projectFormStore, prjid} = props;
        projectFormStore.init(prjid);
    }

    Edit = () => {
        const {history, projectFormStore: {prjid}} = this.props;
        history.push(`/FormOperations?prjid=${prjid}&viewtype=edit`);
    }

    render() {
        const {projectFormStore: {projectForm,isLoading}} = this.props;
        return (<div>
            {
                isLoading ?
                    (<div className='loading'><ActivityIndicator animating size='large'/></div>)
                    :
                    <div>
                        <Form store={projectForm}/>
                        < FloatingTouch
                            size={45}
                            icon={<i className={"proj-float-icon icon-proj icon-bianji"}/>}
                            className={"proj-float-btn "}
                            onClick={() => this.Edit()}
                        />
                    </div>
            }
        </div>)
    }
}
